<template>

  <div>
    <el-button type="info" @click="showStudentInfoAdd">新增</el-button>
    <el-button type="info" @click="handleBatchDelete">批量删除</el-button>

  </div>
  <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" />
    <el-table-column property="id" label="id" width="120" />

    <el-table-column property="consultationtype" label="咨询类型" width="120" />
    <el-table-column property="consultationprice" label="收费价格" width="120" />
    <el-table-column property="consultationnum" label="咨询人数" width="120" />

    <el-table-column label="操作" width="250" align="center">
      <template #default="scope">
        <div style="display: flex;justify-content: center">
          <el-button type="info" @click="showPayInfoEdit(scope.row)">编辑</el-button>
          <el-button type="info" @click="deleteInfo(scope.row.id)">删除</el-button
          >
        </div>
      </template>
    </el-table-column>

  </el-table>
  <div id="page_div">
    <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :page-sizes="[2, 3, 5, 10]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>


  <el-dialog v-model="flag" :title="title" width="500" align-center>
    <div>
      <div>
        <label >ID:</label>
        <el-input
            v-model="feachdata.id"
            style="width: 240px;margin-left: 20px"
            placeholder="请输入"
            :readonly="editEnable"
        />
      </div>
      <div>
        <label>咨询类型:</label>
        <el-input
            v-model="feachdata.consultationtype"
            style="width: 240px;margin-right: 20px"
            placeholder="请输入"
            :readonly="editEnable"
        />
      </div>
      <div>
        <label>咨询价格:</label>
        <el-input
            v-model="feachdata.consultationprice"
            style="width: 240px;margin-right: 20px"
            placeholder="请输入"
            :readonly="editEnable"
        />
      </div>

    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="flag = false">取消</el-button>
        <el-button type="primary" @click="confirmOptions">确定</el-button>
      </div>
    </template>
  </el-dialog>


</template>

<script setup>

import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage, ElMessageBox} from "element-plus";

const size = ref("default");
let pageNum = ref(1);
let pageSize = ref(5);
let total = ref(1);
const currentPage = ref(1);

let flag = ref(false);

let title=ref('');
let editEnable = ref(false);
const feachdata = ref({
})


let tableData = ref([])

const multipleTableRef = ref()
const selectedIds = ref([])

// 选择变化时的处理
const handleSelectionChange = (val) => {
  selectedIds.value = val.map(item => item.id)
}

// 批量删除方法
const handleBatchDelete = () => {
  if (selectedIds.value.length === 0) {
    ElMessage.warning('请至少选择一项')
    return
  }

  ElMessageBox.confirm(
      `确定要删除这 ${selectedIds.value.length} 条数据吗？`,
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    axios.delete('/api/consultation/batch', {
      data: { ids: selectedIds.value }  // 注意使用data传递数组
    }).then(response => {
      ElMessage.success('删除成功')
      fetchData()  // 重新加载数据
      selectedIds.value = []  // 清空选择
    }).catch(error => {
      ElMessage.error('删除失败: ' + error.message)
    })
  }).catch(() => {
    // 用户取消
  })
}





const  confirmOptions= ()=>{
  flag.value=false;
  feachdata.value.consultationnum=0;
  if(title.value=='编辑'){
    axios.put('/api/consultation',feachdata.value)
        .then((resp)=>{
          console.log(resp);
          fetchData();
        })
  }

  if(title.value=='新增'){

    axios.post("/api/consultation",feachdata.value)
        .then((resp)=>{
          fetchData();
        })
  }
}
const showStudentInfoAdd=()=>{
  flag.value=true;
  feachdata.value={};
  editEnable.value=false;
  title.value="新增";
}
const deleteInfo=(id)=>{
  console.log(id);
  console.log("删除");
  axios.delete("/api/consultation/"+id).then((resp)=>{
    console.log(resp);
    fetchData();
  });
}
const showPayInfoEdit = (row) => {
  flag.value=true;
  feachdata.value=row;
  console.log(feachdata.value);

  editEnable.value=false;
  title.value="编辑";
}

function fetchData() {
  try {
    axios.get("/api/consultation/getAllData",{
      params: {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
      }
    }).then(response => {
      const pageInfo = response.data;
      console.log(response.data.list);
      //列表数据
      tableData.value = pageInfo.list;
      //分页条
      total.value = pageInfo.total;
      pageSize.value = pageInfo.pageSize;
      pageNum.value = pageInfo.pageNum;

    });
  }finally {

    console.log("finally");
  }
}

onMounted(() => {
  fetchData();
})
const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
  currentPage.value = 1; // 重置为第一页
  fetchData();
};
const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
  fetchData();
};

</script>
